/*
 * @Author: yxfan
 * @Date: 2022-11-20 10:49:38
 * @LastEditTime: 2024-09-30 11:44:26
 * @FilePath: /umi-demo/src/pages/demo/Xterm/index.tsx
 * @Description: xterm 测试
 */
import { useEffect } from 'react';
// import { Terminal } from 'xterm';
import AceEditor from 'react-ace';
// import 'xterm/css/xterm.css';
import 'ace-builds/src-noconflict/mode-sh';
import 'ace-builds/src-noconflict/theme-twilight';
import './index.less';

const languages = ['javascript', 'java', 'sh'];
const themes = [
    'monokai',
    'github',
    'tomorrow',
    'kuroir',
    'twilight',
    'xcode',
    'textmate',
    'solarized_dark',
    'solarized_light',
    'terminal',
];

// languages.forEach((lang) => {
//     require(`ace-builds/src-noconflict/mode-${lang}`);
//     require(`ace-builds/src-noconflict/snippets/${lang}`);
// });
// themes.forEach((theme) => require(`ace-builds/src-noconflict/theme-${theme}`));

export default () => {
    useEffect(() => {}, []);

    function onChange(e) {
        console.log(e);
    }

    return (
        <div className="xterm-text-wrapper">
            <AceEditor
                mode="sh"
                theme="twilight"
                onChange={onChange}
                name="editor"
                // editorProps={{
                //     $blockScrolling: true,
                //     $blockSelectEnable: true,
                //     $enableBlockSelect: true,
                //     $enableMultiselect: true,
                //     $highlightPending: true,
                //     $highlightTagPending: true
                // }}
                value={`# npm list`}
                setOptions={
                    {
                        // enableMultiselect: true,
                        // cursorStyle: 'slim',
                        // displayIndentGuides: false
                    }
                }
            />
        </div>
    );
};
